<template>
    <div>
        <!--首页顶部导航栏-->
        <div class="topBar" v-if="showNames=='nav'" :style="{'padding-top':navStyle.safeArea+'px','height':navStyle.navigationbarHeight+'px'}">
            <div class="topBar-left" :style="{'width':navStyle.TopNavStyle.width + 'px','height':navStyle.TopNavStyle.height + 'px','padding-top':(navStyle.CapsuleStyle.top-navStyle.safeArea)+'px'}">
                <!--        导航栏-->
                <div class="header-nav-a" :style="{'height':(navStyle.TopNavStyle.height-navStyle.CapsuleStyle.top+navStyle.safeArea-8)+'px','line-height':(navStyle.TopNavStyle.height-navStyle.CapsuleStyle.top+navStyle.safeArea-8)+'px','max-width':(navStyle.TopNavStyle.width-36)+'px'}">
                    <div class="nav-list-a">
                        <div :class="Num== 0?'on':''" @click="onNavitem(0)">关注</div>
                        <div :class="Num== 1?'on':''" @click="onNavitem(1)">热门</div>
                       <div :class="Num== 2?'on':''" @click="onNavitem(2)">福利</div>
                        <!-- <div :class="Num== 2?'on':''" @click="onNavitem(3)">活动</div> -->
                    </div>

                </div>
                <!--        end-->
                <div class="header-search" >
                    <icon type="search" :size="iconSize" color="#000000" @click="skipSearch"></icon>
                </div>
            </div>
        </div>
        <!--end-->

        <!--圈子顶部导航栏-->
        <div class="topBar" v-if="showNames=='circle'" :style="{'padding-top':navStyle.safeArea+'px','height':navStyle.navigationbarHeight+'px'}">
            <div class="topBar-left" :style="{'width':navStyle.TopNavStyle.width + 'px','height':navStyle.TopNavStyle.height + 'px','padding-top':(navStyle.CapsuleStyle.top-navStyle.safeArea)+'px'}">
                <!--        导航栏-->
                <div class="header-nav" :style="{'height':(navStyle.TopNavStyle.height-navStyle.CapsuleStyle.top+navStyle.safeArea-8)+'px','line-height':(navStyle.TopNavStyle.height-navStyle.CapsuleStyle.top+navStyle.safeArea-8)+'px'}">
                    <div style="" :class="Num== 0?'on':''" @click="onNavitem(0)">关注</div>
                    <div :class="Num== 1?'on':''" @click="onNavitem(1)">推荐</div>
                </div>
                <!--        end-->
                <div class="header-search" >
                    <icon type="search" :size="iconSize" color="#000000" @click="skipSearch"></icon>
                </div>
            </div>
        </div>
        <!--end-->

        <!--顶部导航栏 透明底 滚动变黑 只含返回上层-->
        <div :class="BackgroundColors ? 'backgroundBlack topBack' : 'topBack'" v-if="showNames=='back'" :style="{'padding-top':navStyle.safeArea+'px','height':navStyle.navigationbarHeight+'px'}">
            <div v-if="pagesLength>1" @click="onBackReturn" class="topBack-btn" :style="{'height':navStyle.CapsuleStyle.height+'px','margin':(navStyle.CapsuleStyle.top-navStyle.safeArea)+'px','width':navStyle.CapsuleStyle.height+'px','padding':(navStyle.CapsuleStyle.top-navStyle.safeArea)+'px'}">
                <img src="/static/img/Left.png" />
            </div>
			<div v-else-if="specialRoute.path" @click="toSpecialRoute" class="topBack-btn" :style="{'height':navStyle.CapsuleStyle.height+'px','margin':(navStyle.CapsuleStyle.top-navStyle.safeArea)+'px','width':navStyle.CapsuleStyle.height+'px','padding':(navStyle.CapsuleStyle.top-navStyle.safeArea)+'px'}">
			    <img src="/static/img/Left.png" />
			</div>
			<div v-else @click="toHome" class="topBack-btn" :style="{'height':navStyle.CapsuleStyle.height+'px','margin':(navStyle.CapsuleStyle.top-navStyle.safeArea)+'px','width':navStyle.CapsuleStyle.height+'px','padding':(navStyle.CapsuleStyle.top-navStyle.safeArea)+'px'}">
			    <img src="https://rzkeji.oss-cn-shenzhen.aliyuncs.com/web/bbMachine/home-white.png" />
			</div>
        </div>
        <!--end-->

        <!--顶部导航栏 白底 只含返回上层-->
        <div class="backgroundWhite topBack" v-if="showNames=='white'" :style="{'padding-top':navStyle.safeArea+'px','height':navStyle.navigationbarHeight+'px'}">
            <div v-if="pagesLength>1" @click="onBackReturn" class="topBack-btn" :style="{'height':navStyle.CapsuleStyle.height+'px','margin':(navStyle.CapsuleStyle.top-navStyle.safeArea)+'px','width':navStyle.CapsuleStyle.height+'px','padding':(navStyle.CapsuleStyle.top-navStyle.safeArea)+'px'}">
                <img src="/static/img/Left-black.png" />
            </div>
			<div v-else-if="specialRoute.path" @click="toSpecialRoute" class="topBack-btn" :style="{'height':navStyle.CapsuleStyle.height+'px','margin':(navStyle.CapsuleStyle.top-navStyle.safeArea)+'px','width':navStyle.CapsuleStyle.height+'px','padding':(navStyle.CapsuleStyle.top-navStyle.safeArea)+'px'}">
			    <img src="/static/img/Left-black.png" />
			</div>
			<div v-else @click="toHome" class="topBack-btn" :style="{'height':navStyle.CapsuleStyle.height+'px','margin':(navStyle.CapsuleStyle.top-navStyle.safeArea)+'px','width':navStyle.CapsuleStyle.height+'px','padding':(navStyle.CapsuleStyle.top-navStyle.safeArea)+'px'}">
			    <img src="https://rzkeji.oss-cn-shenzhen.aliyuncs.com/web/bbMachine/home-black.png" />
			</div>
        </div>
        <!--end-->

        <!--发帖顶部导航栏-->
        <div class="topBar" v-if="showNames=='post'" :style="{'padding-top':navStyle.safeArea+'px','height':navStyle.navigationbarHeight+'px'}">
            <div @click="onBackReturn" class="topDel-btn" :style="{'height':navStyle.CapsuleStyle.height+'px','margin':(navStyle.CapsuleStyle.top-navStyle.safeArea)+'px','width':navStyle.CapsuleStyle.height+'px','padding':(navStyle.CapsuleStyle.top-navStyle.safeArea)+'px'}">
                <img src="http://rzkeji.oss-cn-shenzhen.aliyuncs.com/web/bbMachine/delXX-black.png" />
            </div>
            <div class="topBar-title" :style="{'height':navStyle.CapsuleStyle.height+'px','margin':(navStyle.CapsuleStyle.top-navStyle.safeArea)+'px','padding':(navStyle.CapsuleStyle.top-navStyle.safeArea+2)+'px','width':(navStyle.TopNavStyle.width-navStyle.CapsuleStyle.height-(navStyle.CapsuleStyle.top-navStyle.safeArea)*4)+'px'}">
                {{postName.name?'发布到'+postName.name:'发布帖子'}}
            </div>
        </div>
        <!--end-->

        <!--搜索页面顶部导航栏-->
        <div class="topBar" v-if="showNames=='search'" :style="{'padding-top':navStyle.safeArea+'px','height':navStyle.navigationbarHeight+'px'}">
            <div v-if="!ReturnFirst" @click="onBackReturn" class="topBar-back" :style="{'height':navStyle.CapsuleStyle.height+'px','margin':(navStyle.CapsuleStyle.top-navStyle.safeArea)+'px','width':navStyle.CapsuleStyle.height+'px','padding':(navStyle.CapsuleStyle.top-navStyle.safeArea)+'px'}">
                <img src="/static/img/Left-black.png" />
            </div>
            <div v-if="ReturnFirst" @click="onReturnFirst" class="topBar-back" :style="{'height':navStyle.CapsuleStyle.height+'px','margin':(navStyle.CapsuleStyle.top-navStyle.safeArea)+'px','width':navStyle.CapsuleStyle.height+'px','padding':(navStyle.CapsuleStyle.top-navStyle.safeArea)+'px'}">
                <img src="/static/img/Left-black.png" />
            </div>
            <div class="topBar-input" :style="{'height':navStyle.CapsuleStyle.height+'px','margin':(navStyle.CapsuleStyle.top-navStyle.safeArea)+'px','width':(navStyle.TopNavStyle.width-navStyle.CapsuleStyle.height-(navStyle.CapsuleStyle.top-navStyle.safeArea)*4)+'px'}">
                <input placeholder="请输入搜索关键词" class="input" type="text" v-model="keyword" :style="{'padding-left':navStyle.CapsuleStyle.height+'px'}"/>
                <icon class="weui-icon-search_in-box" type="search" size="14" :style="{'left':(navStyle.CapsuleStyle.height+((navStyle.CapsuleStyle.top-navStyle.safeArea)*2)+(navStyle.CapsuleStyle.top-navStyle.safeArea)+(navStyle.CapsuleStyle.height-14)/2)+'px','top':(navStyle.safeArea+(navStyle.CapsuleStyle.top-navStyle.safeArea)+(navStyle.CapsuleStyle.height-14)/2)+'px'}"></icon>
            </div>
        </div>
        <!--end-->
    </div>

</template>

<script>
    export default {
        name: "topBar",
        props:{
            PageNum:{
                required: true
            },
            showName:{
                required: true
            },
            BackgroundColor:{
                required: true
            },
            postName:{
                required: true
            },
            keyWords:{
                required: true
            },
            returnFirst:{
                required: true
            },
			specialRoute:{
				//跳转特殊页面
				required:false,
				default:function(){
					return{
						path:'',
						options:''
					}
				}
			},
        },
        data(){
            return{
                Num: this.PageNum,
                showNames: this.showName,
                postNames: this.postName,
                BackgroundColors: this.BackgroundColor,
                keyword: this.keyWords,
                ReturnFirst: this.returnFirst,
                iconSize: getApp().globalData.iconSize,
                navStyle: getApp().globalData.navStyle,
            }
        },
		computed:{
			pagesLength(){
				//页面栈的长度
				console.log(getCurrentPages().length)
				return getCurrentPages().length
			}
		},
        mounted(){
            // uni.getSystemInfo({
            //     success: res => {
            //         let CapsuleStyle = uni.getMenuButtonBoundingClientRect();
            //         //导航栏高度
            //         let navigationbarHeight = CapsuleStyle.height + (CapsuleStyle.top - res.safeArea.top)*2 + res.safeArea.top;
            //         //除去胶囊体，导航栏可以空间
            //         let TopNavStyle = {
            //             width: CapsuleStyle.left,
            //             height: navigationbarHeight - res.safeArea.top
            //         }
            //         this.navStyle = {
            //             safeArea : res.safeArea, //界面画框，去掉顶部状态栏后的空间
            //             navigationbarHeight: navigationbarHeight, //导航栏高度
            //             CapsuleStyle: CapsuleStyle, //胶囊体位置信息
            //             TopNavStyle: TopNavStyle //除去胶囊体，导航栏可以空间
            //         }
            //         getApp().globalData.navStyle = this.navStyle;
            //         let windowWidth = res.windowWidth;
            //         if (windowWidth>480){
            //             this.iconSize = 48
            //         }
            //     }
            // })
        },
        //小程序监听页面滚动
        onPageScroll(){
            console.log('sss')
            this.BackgroundColor = true;
            uni.setNavigationBarColor()
        },
        methods:{
			toSpecialRoute(){
				//跳转特殊页面
				let path=this.specialRoute.path;
				
				if(JSON.stringify(this.specialRoute.options)!='{}'){
					path+='?'
					path+=this.$currency.toQueryString(this.specialRoute.options)
				}
				uni.redirectTo({
					url:path
				})
				
				
			},
			toHome(){
				uni.switchTab({
					url:'/pages/index/index'
				})
			},
            //返回上一级
            onBackReturn(){
                uni.navigateBack({
                    delta: 1
                })
            },
            //首页、推荐页面切换
            onNavitem(id){
                this.Num = id;
                // if (id==0){
                //     this.IndexShow = true;
                //     this.FollowShow = false;
                // } else {
                //     this.IndexShow = false;
                //     this.FollowShow = true;
                //     this.myFollowUserActive();
                // }
            },
            //跳转到搜索页面
            skipSearch(){
                uni.navigateTo({
                    url:'/pages/searchPage/searchpage'
                })
            },
            //返回初始状态
            onReturnFirst(){
                this.keyword = '';
                this.ReturnFirst = false;
            }
        },
        watch:{
            PageNum(newValue){
                this.Num = newValue;
            },
            Num(newValue, oldValue){
                this.$emit('update:PageNum',newValue)
            },
            BackgroundColor(newValue){
                this.BackgroundColors = newValue;
            },
            BackgroundColors(newValue, oldValue){
                this.$emit('update:BackgroundColor',newValue)
            },
            postName(newValue){
                this.postNames = newValue;
            },
            postNames(newValue, oldValue){
                this.$emit('update:postName',newValue)
            },
            keyWords(newValue){
                this.keyword = newValue;
            },
            keyword(newValue, oldValue){
                if (newValue == ''){
                    this.ReturnFirst = false;
                }
                this.$emit('update:keyWords',newValue)
            },
            returnFirst(newValue){
                this.ReturnFirst = newValue
            },
            ReturnFirst(newValue, oldValue){
                this.$emit('update:returnFirst',newValue)
            }
        }
    }
</script>

<style scoped lang="scss">
    .topBar{
        position: fixed;
        z-index: 9999;
        background: #ffffff;
        width: 100vw;
        top: 0;
        left: 0;
        .topBar-left{
            display: flex;
            flex-direction: row;
            justify-content: left;
            align-items: center;
        }
    }
    .topBack{
        position: fixed;
        z-index: 9999;
        /*background: #ffffff;*/
        width: 100vw;
        top: 0;
        left: 0;
    }
    .backgroundBlack{
        background: rgba(0,0,0,0.8);
    }
    .backgroundWhite{
        background: #FFFFFF;
    }
    .topDel-btn{
        display: inline-block;
        vertical-align: middle;
    }
    .topBar-back{
        display: inline-block;
        vertical-align: middle;
    }
    .topBar-input{
        display: inline-block;
        vertical-align: middle;
        .input{
            font-size: 32rpx;
            height: 100%;
            line-height: 100%;
            background: #F1F4F7;
            border-radius: 16rpx;
        }
        //icon
        .weui-icon-search_in-box {
            position: absolute;
            left: 10vw;
            top: 30rpx;
        }
    }
    .topBar-title{
        display: inline-block;
        text-align: center;
        font-size: 32rpx;
        font-weight: bold;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        vertical-align: middle;
    }
</style>